<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=grid-multiple
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script th:src="@{/js/jquery-3.5.1.min.js}" type="text/javascript"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");

    function formatDate(date) {
        var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();
        HH = d.getHours();
        MM = d.getMinutes();

        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;

        return [year, month, day].join('/') + " " + HH + ":" + MM;
    }

    var timeData = [];
    liquidLevelHeight =[];
    flow = [];
    let all_data;
    $.ajaxSettings.async = false;
    $.get('/data/getAll', function (data) {
        all_data = data.data;
        for (let i = 0; i < all_data.length; i++) {
            timeData.push(formatDate(all_data[i].attributes.dataTime));
            liquidLevelHeight.push(Number(all_data[i].attributes.liquidLevelHeight));
            flow.push(Number(all_data[i].attributes.flow));
        }
    })
    console.log(liquidLevelHeight);
    console.log(flow);
    var myChart = echarts.init(dom);
    var app = {};

    var option;




    timeData = timeData.map(function (str) {
        return str.replace('2021/', '');
    });

    option = {
        title: {
            text: '流量液位高度关系图',
            subtext: '数据来自集美大学机械工程学院',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false
            }
        },
        legend: {
            data: ['流量', '液位高度'],
            left: 10
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        axisPointer: {
            link: {xAxisIndex: 'all'}
        },
        dataZoom: [
            {
                show: true,
                realtime: true,
                start: 30,
                end: 70,
                xAxisIndex: [0, 1]
            },
            {
                type: 'inside',
                realtime: true,
                start: 30,
                end: 70,
                xAxisIndex: [0, 1]
            }
        ],
        grid: [{
            left: 50,
            right: 50,
            height: '35%'
        }, {
            left: 50,
            right: 50,
            top: '55%',
            height: '35%'
        }],
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                axisLine: {onZero: true},
                data: timeData
            },
            {
                gridIndex: 1,
                type: 'category',
                boundaryGap: false,
                axisLine: {onZero: true},
                data: timeData,
                position: 'top'
            }
        ],
        yAxis: [
            {
                name: '流量(L/s)',
                type: 'value',
                max: 500
            },
            {
                gridIndex: 1,
                name: '液位高度(m)',
                type: 'value',
                inverse: true
            }
        ],
        series: [
            {
                name: '流量',
                type: 'line',
                symbolSize: 8,
                hoverAnimation: false,
                data: flow
            },
            {
                name: '液位高度',
                type: 'line',
                xAxisIndex: 1,
                yAxisIndex: 1,
                symbolSize: 8,
                hoverAnimation: false,
                data: liquidLevelHeight
            }
        ]
    };


    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>

<script>

</script>
</body>
</html>
    